<template>
  <div class="app-container">
    <el-row style="width: 100%;height: 90%;margin: 0;" :gutter="10">
      <!--基本信息-->
      <el-col :span="7" style="height: 100%;padding-left: 0;">
        <el-card>
          <div slot="header" class="clearfix">
            <span style="font-size: 20px;font-weight: bold;">设备信息</span>
          </div>
          <div style="width: 100%;height: 300px;margin: 0 auto 10px auto;">
            <img :src="xbImgUrl"
                 style="width: 100%;height: 100%;" alt=""/>
          </div>
          <div :style="getDescriptionStyle">
            <el-descriptions class="margin-top" title="" :column="2" size="small" border :labelStyle="labelStyle">
              <el-descriptions-item>
                <template slot="label">
                  用户名称
                </template>
                {{ meteredData.userName }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  用户编号
                </template>
                {{ meteredData.userId }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  用户通讯地址
                </template>
                {{ meteredData.userAddress }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  设备编号
                </template>
                {{ meteredData.terminalId }}
              </el-descriptions-item>
              <!--            <el-descriptions-item>-->
              <!--              <template slot="label">-->
              <!--                通讯地址-->
              <!--              </template>-->
              <!--              {{ meteredData.userAddress }}-->
              <!--            </el-descriptions-item>-->
              <el-descriptions-item>
                <template slot="label">
                  IMEI
                </template>
                {{ meteredData.imei }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  厂家名称
                </template>
                <dict-tag :options="dict.type.terminal_supplier" :value="meteredData.supplierId"/>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  表型号
                </template>
                <dict-tag :options="dict.type.module_type" :value="meteredData.typeId"/>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  表底数
                </template>
                {{ meteredData.baseReading }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  是否带阀控
                </template>
                <dict-tag :options="dict.type.yes_no" :value="meteredData.valveControl"/>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  安装日期
                </template>
                {{ parseTime(meteredData.installDate, '{y}-{m}-{d}') }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  抄表周期
                </template>
                <dict-tag :options="dict.type.reader_cycle" :value="meteredData.meterReaderCycle"/>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  表状态
                </template>
                <dict-tag :options="dict.type.used_status" :value="meteredData.terminalMark"/>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  协议名称
                </template>
                {{ meteredData.protocolName }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  表解析地址
                </template>
                {{ meteredData.communicateAddress }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  集中器名称
                </template>
                {{ meteredData.concentratorName }}
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </el-card>

      </el-col>
      <el-col :span="17" style="background-color: white;padding: 10px 10px;" class="right_content">
        <!-- tab -->
        <el-tabs v-model="currentTabKey" type="card" @tab-click="handleTabClick">
          <el-tab-pane label="历史数据" name="1">
            <HistoryData ref="refHistoryData" v-show="currentTabKey==='1'"/>
          </el-tab-pane>
          <el-tab-pane label="用量统计" name="2">
            <DosageStatistics ref="refMeteredDosage" v-show="currentTabKey==='2'"/>
          </el-tab-pane>
          <!-- <el-tab-pane label="日志记录" name="3">
            <Log ref="refMeteredLog" v-show="currentTabKey==='3'"/>
          </el-tab-pane> -->
          <el-tab-pane label="报警记录" name="4">
            <Alarm ref="refMeteredAlarm" v-show="currentTabKey==='4'"/>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import HistoryData from "./components/HistoryData.vue";
import Log from './components/Log.vue';
import Alarm from './components/Alarm.vue';
import DosageStatistics from './components/DosageStatistics.vue';
import {listElectricityTerminalsXb} from "@/api/basedata/elecTerminalXb";



export default {
  name: "HistoryXb",
  components: { DosageStatistics, HistoryData, Alarm, Log },
  dicts: ['belong_department', 'yes_no', 'used_status', 'belong_department', 'module_type', 'command_type', 'terminal_supplier', 'reader_cycle', 'sign_platform', 'ldbd_pipe_caliber', 'water_meter_aperture'],
  data() {
    return {
      xbImgUrl: require("@/assets/images/dib.png"),
      locationNb: null,
      labelStyle: {width: '90px'},
      meteredData: {},
      currentTabKey: '1',

    };
  },
  beforeCreate() {
    this.$route.meta.title = `数据详情`
  },
  beforeRouteEnter(to, from, next) {
    to.meta.title = `${to.params.terminalId}--数据详情`
    next()
  },
 mounted() {
    this.locationNb = this.$route.params.locationNb

    this.getByLocationNbData()
    this.$nextTick(() => {
      this.doLoadTabPaneData(this.currentTabKey)
    })
  },
  computed: {
    getDescriptionStyle() {
      return {overflow: 'auto', height: (this.screenHeight - 465) + 'px'}
    }
  },
  methods: {
    /** 查询小-历史数据列表 */
    getByLocationNbData() {
      let query = {
        locationNb: this.locationNb,
        terminalMark: 1,
      }

      listElectricityTerminalsXb(query).then(response => {
        if (response.code === 200) {
          this.meteredData = response.rows[0];
        }
      });
    },
    // 切换tab
    handleTabClick(tab){
      this.doLoadTabPaneData(tab._props.name)
    },
    doLoadTabPaneData(tabName) {
      this.$nextTick(() => {
        if (tabName === '1') {
          this.$refs.refHistoryData.updateLocationNb(this.locationNb)
          this.$refs.refHistoryData.handleQuery()
        } else if (tabName === '2') {
          this.$refs.refMeteredDosage.updateLocationNb(this.locationNb)
          this.$refs.refMeteredDosage.handleQuery()
        } else if (tabName === '3') {
          this.$refs.refMeteredLog.updateLocationNb(this.locationNb)
          this.$refs.refMeteredLog.handleQuery()
        } else if (tabName === '4') {
          this.$refs.refMeteredAlarm.updateLocationNb(this.locationNb)
          this.$refs.refMeteredAlarm.getAlarmType()
          this.$refs.refMeteredAlarm.handleQuery()
        }
      })
    },
  }
};
</script>
<style scoped lang="scss">
::v-deep .right_content{
  .el-tabs__header {
    margin: 0 0 0px;
  }
}
</style>
